<?php get_header(); ?>
<body <?php body_class("bg_3"); ?>>
<div id="container">
	<?php include("wp-content/themes/coalhadas/menutopo.php"); ?>
    <div id="content">
        <div id="boxG" class="borda_redonda">
        	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <div id="tituloreceita" style="margin-top:30px; font-size:20px; font-weight:bold; margin-bottom:17px;"><?php the_title(); ?></div>
            <?php endwhile; else : ?>
                <p><?php _e("Nem tudo está perdido. Confira tudo e tente novamente.", "bonestheme"); ?></p>
            <?php endif; ?>
            <div id="conteudoreceita">
                <div id="receitaesquerda" style="float:left;">
                	<style type="text/css" media="screen">
						/*
							Load CSS before JavaScript
						*/
						/*
							Slides container
							Important:
							Set the width of your slides container
							Set to display none, prevents content flash
						*/
						.slides_container {
							width:330px;
							/*display:none;*/
						}
						/*
							Each slide
							Important:
							Set the width of your slides
							If height not specified height will be set by the slide content
							Set to display block
						*/
						.slides_container div {
							width:330px;
							height:230px;
							display:block;
						}
                        .slides_container div img {
                            width:330px;
                            height:230px;
                            display:inline-block;
                        }
						/*
							Optional:
							Reset list default style
						*/
						.prev {
							float: left;
							margin-top: -135px;
							position: relative;
							z-index:9999;
						}
						.next {
							float: right;
							margin-top: -135px;
							position: relative;
							z-index: 9999;
						}
					</style>
                	<script src="<?php echo get_template_directory_uri(); ?>/library/js/slides.min.jquery.js"> </script>
					<script>
                        jQuery(function($){
                            $('#slides').slides({
                                generateNextPrev: true,
                                pagination: false,
                                generatePagination: false
                            });
                        });
                    </script>
                    <div id="imgreceita"  class="borda_redonda" style="overflow:hidden; width:330px; height:230px; border: solid 3px;">
                    	<div id="slides">
                            <div class="slides_container">
                            	<?php
								$fields = $cfs->get('imagens-receita');
								foreach ($fields as $field)
								{
									?> <div><img src="<?php echo $field['imagem-receita']; ?>" alt="" /></div> <?php
								}
								?>
                            </div>
                        </div>
                    </div>
                    <div id="iconesreceita" style="width:330px; margin-top:10px;">
                    	<div id="temporeceita" style="float:left; margin-left:40px; margin-top:10px; width:110px; font-size:10px;"><img src="<?php echo get_template_directory_uri(); ?>/imgs/relogio.png" /> <?php echo $cfs -> get('tempo_de_preparo'); ?></div>
                        <div id="compartilharreceita" style="float:left; margin-left:40px; margin-top:10px; width:110px; font-size:10px;"><img src="<?php echo get_template_directory_uri(); ?>/imgs/compartilhar.png" />compartilhar</div>
                        <div id="rendimentoreceita" style="float:left; margin-left:40px; margin-top:10px; width:110px; font-size:10px;"><img src="<?php echo get_template_directory_uri(); ?>/imgs/garfofaca.png" /> <?php echo $cfs -> get('rendimento_da_receita'); ?></div>
                        <div id="imprimirreceita" style="float:left; margin-left:40px; margin-top:10px; width:110px; font-size:10px;"><img src="<?php echo get_template_directory_uri(); ?>/imgs/impressora.png" />imprimir</div>
                    </div>
                </div>
                <div id="receitadireita" style="float:left; width:480px;">
                	<div id="receitaabas" style="text-align: right; height:40px">
                    	<script>
						function ingredpreparo(aba)
						{
							if (aba == 'ingred')
							{
								document.getElementById('ingredientes').style.zIndex = 2;
								document.getElementById('preparo').style.zIndex = 1;
								document.getElementById('receitaingredientes').style.display = 'block';
								document.getElementById('receitamodopreparo').style.display = 'none';
							}
							else
							{
								document.getElementById('ingredientes').style.zIndex = 1;
								document.getElementById('preparo').style.zIndex = 2;
								document.getElementById('receitaingredientes').style.display = 'none';
								document.getElementById('receitamodopreparo').style.display = 'block';
							}
						}
						</script>
                    	<div id="preparo" onclick="ingredpreparo('prep')" style="background-color:#5AB4F2; width:250px; height:30px; float:right; color:#004170; text-align:center; position:relative; z-index:1; margin-left:-15px; margin-right:-39px; cursor:pointer; line-height:30px;">MODO DE PREPARO</div>
                    	<div id="ingredientes" onclick="ingredpreparo('ingred')" style="background-color:#006CB7; width:250px; height:30px; float:right; color:#FFF; text-align:center; position:relative; z-index:2; margin-right:-15px; cursor:pointer; line-height:30px;">INGREDIENTES</div>
                    </div>
                    <div id="receitaingredientes" class="jScrollbar3" style="width:455px; height:250px; padding: 0 0 0 40px;">
                        <div class="jScrollbar_mask" style="width:435px;">
                            <div class="the_content">
                                <?php echo $cfs -> get('ingredientes'); ?>
                        	</div><!--the_content-->
                        </div><!--jScrollbar_mask-->
                        <div class="jScrollbar_draggable" style="height:250px;">
                            <!-- slider -->
                            <a href="#" class="draggable"></a>
                        </div>
                        <div class="clr"></div>
                    </div><!--jScrollbar-->
                    <div id="receitamodopreparo" class="jScrollbar3" style="width:455px; height:250px; padding: 0 0 0 40px;">
                        <div class="jScrollbar_mask" style="width:435px;">
                            <div class="the_content">
                                <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                                <?php the_content(); ?>
                                <?php endwhile; else : ?>
                                    <p><?php _e("Nem tudo está perdido. Confira tudo e tente novamente.", "bonestheme"); ?></p>
                                <?php endif; ?>
                        	</div><!--the_content-->
                        </div><!--jScrollbar_mask-->
                        <div class="jScrollbar_draggable" style="height:250px;">
                            <!-- slider -->
                            <a href="#" class="draggable"></a>
                        </div>
                        <div class="clr"></div>
                    </div><!--jScrollbar-->
                    <div style="text-align: right; margin-top: 20px; position:relative; z-index:9999;">
                    <a href="page_receitas.php" style="text-decoration:none; color:#006bb7;">VOLTAR</a>
                    </div>
                </div><!-- titulodireita -->
            </div><!-- conteudoreceita -->
        </div><!--empresa-box-->
    </div><!--content-->
    
    
    
    
                        <script type="text/javascript">
						var addthis_config = { services_exclude: 'print', services_expanded: 'facebook, twitter, google, email', services_compact: 'facebook, twitter, google, email'};
                        </script>
<?php get_footer(); ?>